<template>
  <div style="position: relative">
    <a-form
      ref="formRef"
      layout="vertical"
      :model="formState"
      :rules="rules"
      :wrapper-col="wrapperCol"
      style="display: flex; flex-wrap: wrap"
    >
     <a-form-item v-if="formState.level" label="上级菜单"   style="width: 100%">
        {{formState.parentName}}
      </a-form-item>
      <a-form-item style="width: 50%;padding-right:15px" ref="name" label="菜单名称" name="name">
        <a-input v-model:value="formState.name" placeholder="请输入菜单名称" />
      </a-form-item>
     
      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="perms"
        label="菜单编码"
        name="perms"
      >
        <a-input
          v-model:value="formState.perms"
          placeholder="请输入菜单编码"
        />
      </a-form-item>
     <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="url"
        label="菜单路由"
        name="url"
      >
        <a-input
          v-model:value="formState.url"
          placeholder="请输入菜单编码"
        />
      </a-form-item>
       <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="sortNum"
        label="排序号"
        name="sortNum"
      >
        <a-input-number
        style="width:100%"
        :min="1"
          v-model:value="formState.sortNum"
          placeholder="请输入排序号"
        />
      </a-form-item>
       <a-form-item
        style="width: 100%"
        ref="type"
        label="菜单类型"
        name="type"
      >
        <a-radio-group :options="plainOptions" v-model:value="formState.type" />
      </a-form-item>
      
      <a-form-item style="width: 100%"
      v-if="userInfo.type != 'admin'"
        ref="sysFlag"
        label="工作组"
        name="sysFlag">
        <a-select
      ref="select"
      v-model:value="formState.sysFlag"
      style="width: 100%"
    >
      <a-select-option value="hospital">医院端</a-select-option>
      <a-select-option value="staff">员工AP</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>

   
  </div>
</template>
<script>
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  toRaw,
  toRef,
  toRefs,
  watch,
} from "vue";
import * as sysUserAdminApi from "@/api/userAdmin.js";
import { message } from "ant-design-vue";
import { getUserInfo } from "@/utils/auth";
import * as settingApi from "@/api/setting1";
const plainOptions = [
  {
    label: '菜单',
    value: 'base',
  },
  {
    label: '按钮',
    value: 'button',
  }
]
const rules = {
  name: [
    {
      required: true,
       message: "请输入菜单名称",
      trigger: "blur",
    },
  ],
  
  perms: [
    {
      required: true,
     
      message: "请输入正确编码",
      trigger: "blur",
    },
  ],
  url:[{
    required: true,
     
      message: "请输入菜单路由",
      trigger: "blur",
  }]
};

export default defineComponent({
  props: {
    handleType: {
      type: String,
      default: "add",
    },
    handleRow: {
      type: Object,
      default: {},
    },
  },
  setup(props, { emit }) {
    const handleType = toRef(props, "handleType");
    const formRef = ref();
    const formState = reactive({
      name: "", //菜单名称
      perms: "", //菜单编码
      id:'',
      url:'',//菜单路由
      sortNum:'',//排序号
      type:'base',
      sysFlag:'hospital',//工作组合,
      parentName:'',
      parentId:'',
    });
    const userInfo = ref(getUserInfo() ? JSON.parse(getUserInfo()) : {})
    // 保存数据
    const handleSave = () => {
      if (props.handleType == "look") {
        resetForm();
        emit("finish");
        return false;
      }
      formRef.value.validate().then(() => {
        let params = {
          ...toRaw(formState),
          sysFlag: userInfo.value.type == "admin" ? "admin" : formState.sysFlag
        };
          settingApi
            .saveMenus(params).then((res) => {
          if (res && res.success) {
            message.success("操作成功");
            resetForm();
            emit("finish");
          } else {
          }
        });
      });
    };
    const resetForm = () => {
      formRef.value.resetFields();
    };
    onMounted(async () => {
      formState.sysFlag = props.handleRow.sysFlag
      if (props.handleType == "add") {
        formState.id = ''
        formState.parentName = props.handleRow.parentName || ''
        formState.parentId = props.handleRow.parentId || ''
        formState.level =  props.handleRow.level || false
        return false;
      }
      formState.name = props.handleRow.name
      formState.perms = props.handleRow.perms
      formState.id = props.handleRow.id
      formState.url = props.handleRow.url
      formState.sortNum = props.handleRow.sortNum 
      formState.type = props.handleRow.type 
     
    });

   
    return {
      formRef,
      plainOptions,
      handleType,
      userInfo,
      wrapperCol: {
        span: 0,
      },
      formState,
      rules,
      handleSave,
      resetForm,
    };
  },
});
</script>
<style lang="scss">

</style>